<template>
  <div class="device">
    <div class="header flex-row flex-align-items-c flex-justify-content-sb">
      <p class="header-title">广告主</p>
      <div class="flex-row flex-align-items-c">
        <el-input v-model="input" placeholder="请输入广告主名称" @change="pointSeach"></el-input>
        <el-button class="search-btn" @click="pointSeach">搜索</el-button>
      </div>
      <div class="flex-row flex-align-items-c">
        <el-button style="background:#ef7e09;color:#fff;" icon="el-icon-circle-plus-outline" @click="showAddDailog">新增广告主</el-button>
        <download-excel
          class="export-excel-wrapper"
          :data="tableData"
          :fields="json_fields"
          name="广告主信息.xls"
        >
          <el-button class="search-btn">导出数据</el-button>
        </download-excel>
      </div>
    </div>
    <div class="table-box">
      <el-table
        :data="tableData"
        style="width: 100%"
        :default-sort="{prop: 'date', order: 'descending'}"
      >
        <el-table-column type="selection" width="30"></el-table-column>
        <el-table-column prop="name" label="广告主" show-overflow-tooltip></el-table-column>
        <el-table-column prop="name" label="开放状态" show-overflow-tooltip></el-table-column>
        <el-table-column prop="address" label="设备地址" show-overflow-tooltip></el-table-column>
        <el-table-column prop="region" label="所属点位" show-overflow-tooltip></el-table-column>
        <el-table-column prop="viewers_today" label="今日观看" sortable show-overflow-tooltip></el-table-column>
        <el-table-column prop="viewers_yesterday" label="昨日观看" sortable show-overflow-tooltip></el-table-column>
        <el-table-column prop="viewers_per" label="日均观看" sortable show-overflow-tooltip></el-table-column>
        <el-table-column prop="visitors_per" label="模板数量" show-overflow-tooltip></el-table-column>
        <el-table-column prop="visitors_per" label="设备分配" show-overflow-tooltip></el-table-column>
        <el-table-column prop="visitors_per" label="广告主" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="seeAD(scope.row)" type="text" size="small">修改密码</el-button>
          </template>
          <!-- <el-button type="text" @click="seeAD(index)"></el-button> -->
        </el-table-column>
        <el-table-column prop="visitors_per" label="最近登入"></el-table-column>
      </el-table>
    </div>
    <div class="flex-row flex-align-items-c flex-justify-content-c my-pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="meta.current_page"
        :page-size="page_size"
        layout="prev, pager, next, jumper"
        :total="meta.total"
        background
      ></el-pagination>
      <!-- 添加广告主弹窗 -->
      <el-dialog title="添加广告主" :visible.sync="addADUserdialogVisible" width="25%" >
        <el-form :inline="true" ref="ruleForm" :model="formInline" class="demo-form-inline"  :rules="rules">
          <el-form-item label="手机号：" prop="name">
            <el-input v-model="formInline.name" placeholder="手机号" ></el-input>
          </el-form-item>
          <el-form-item label="密码：" prop="password">
            <el-input v-model="formInline.password" placeholder="密码" type='password' ></el-input>
          </el-form-item>
          <el-form-item class="sub-btnBox flex-row flex-align-items-c flex-justify-content-c">
            <el-button @click="addADUserdialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="onSubmit('ruleForm')">确 定</el-button>
            <!-- <el-button type="primary" @click="onSubmit">查询</el-button> -->
          </el-form-item>
        </el-form>
        <!-- <span slot="footer" class="dialog-footer"></span> -->
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data () {
    return {
      json_fields: {
        设备名称: 'name',
        设备地址: 'address',
        所属点位: 'region',
        今日观看: 'viewers_today',
        昨日观看: 'viewers_yesterday',
        日均观看: 'viewers_per',
        日均人流量: 'visitors_per'
      },
      addADUserdialogVisible: false,
      formInline: {
        name: '',
        password: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            min: 3,
            max: 11,
            message: '长度在11个字符',
            trigger: 'blur'
          },
          {
            pattern: /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/,
            message: '请输入正确的手机号',
            trigger: 'blur'
          }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      transferDialogVisible: false,
      transferValue: [],
      transferTitle: ['待开启设备', '已选择的设备'],
      machineData: [
        {
          key: '',
          label: ''
        }
      ],
      input: '',
      currentPage: 5,
      radio: '',
      meta: {
        current_page: 1
      },
      page_size: 30,
      tableData: [
      ]
    }
  },
  computed: {},
  created () {
    this.getMachineList()
  },
  mounted () {},
  watch: {},
  methods: {
    formatter (row, column) {
      return row.address
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.getMachineList()
    },
    pointSeach () {
      // if (this.input != "") {
      this.getMachineList()
      // } else {
      //   this.$message.error({
      //     message: "请输入场地名称"
      //   });
      // }
    },
    deteSeach () {},
    seeAD (row) {
      console.log(row)
      this.$router.push({
        name: 'advertising',
        params: {
          id: row.machine_id
        }
      })
    },
    getMachineList () {
      let code = `advertiser_id=${
        JSON.parse(sessionStorage.getItem('userinfo')).id
      }&address=${this.input}&page_size=${this.page_size}&page=${
        this.meta.current_page
      }`
      console.log(code)
      let RASCODE = this.$getCode(code)
      this.http
        .getMachineList({
          secret: RASCODE
        })
        .then(res => {
          console.log(res)
          if (res.data.errno == '000') {
            this.tableData = res.data.result.data
            this.meta = res.data.result.meta
          } else {
            this.tableData = [];
            (this.meta = {
              current_page: 1
            }),
            this.$message.error({
              message: res.data.errmsg
            })
          }
        })
        .catch(err => {})
    },
    showTransfer (sta) {
      this.transferDialogVisible = !this.transferDialogVisible
      sta == 1
        ? (this.transferTitle[0] = '待开启设备')
        : (this.transferTitle[0] = '待关闭设备')
    },
    dialogHide () {
      this.machineData = []
      this.value = []
    },
    upServing () {},
    onSubmit () {
      console.log('submit!')
    },
    showAddDailog () {
      this.addADUserdialogVisible = !this.addADUserdialogVisible
    }
  },
  components: {}
}
</script>

<style scoped lang="less">
@import url("./index.less");
</style>
<style lang="css">
    .el-form-item__label{
        min-width: 100px;

    }
    .sub-btnBox{
        display: block !important;
        min-width: 100px;
        /* margin: 0 auto; */
    }
    .sub-btnBox .el-form-item__content{
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 100%;
    }
    .sub-btnBox .el-form-item__content button{
        margin: 0 20px;
    }
</style>
